<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>

  <body>
    <script>
      // 发布者-目标
      class Dep {
        // 记录所有的订阅者
        constructor() {
          this.subs = [];
        }

        addSub(sub) {
          // sub存在，同时也具有update 方法
          if (sub && sub.update) {
            this.subs.push(sub);
          }
        }

        notify() {
          this.subs.forEach((sub) => {
            sub.update();
          });
        }
      }

      // 订阅者-观察者
      class Watcher {
        update() {
          console.log('update');
        }
      }

      let dep = new Dep();
      let watcher = new Watcher();
      dep.addSub(watcher);
      dep.notify();
    </script>
  </body>
</html>
